<template>
    <div class="item-container">
        <a-space :size="16" direction="vertical" fill>
            <a-descriptions :data="data" :title="title" v-bind="$attrs">
                <template #value="{ value }">
                    <a-skeleton v-if="loading" :animation="true">
                        <a-skeleton-line :widths="['200px']" :rows="1" />
                    </a-skeleton>
                    <span v-else>{{ value }}</span>
                </template>
            </a-descriptions>
        </a-space>
    </div>
</template>

<script lang="ts" setup>
    import { PropType } from 'vue';

    defineProps({
        data: {
            type: Object as PropType<
                { label: string; value: any; [x: string]: any }[]
            >,
            required: true,
        },
        title: {
            type: String,
            default: '',
        },
        loading: {
            type: Boolean,
            default: false,
        },
    });
</script>

<style scoped lang="less">
    .item-container {
        padding-top: 20px;
        :deep(.arco-descriptions-item-label) {
            font-weight: normal;
        }
    }
</style>
